<template>
  <div class="main">
    <el-button type="primary" class="btnAdd" @click="handEdit">新增</el-button>
    <el-table border :data="tableData" style="width: 100%" fit stripe highlight-current-row lazy>
      <el-table-column width="50" label="序号" type="index"></el-table-column>
      <el-table-column prop="date" label="工艺维度名称"></el-table-column>
      <el-table-column prop="name" label="工艺维度分数"></el-table-column>
      <el-table-column prop="address" label="显示顺序"></el-table-column>
      <el-table-column prop="color" label="颜色">
        <template slot-scope="scope">
          <span v-html="scope.row.color"></span>
          <span class="btn" :style="{backgroundColor:scope.row.color}"></span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <el-link type="primary" size="mini" plain @click="handEdit">编辑</el-link>
        <el-link type="primary" size="mini" plain @click="handEdit">删除</el-link>
        <el-link type="primary" size="mini" plain @click="handledetail">维度配置</el-link>
      </el-table-column>
    </el-table>
    <dialogEngin v-if="dialogVisible" :dialogVisible="dialogVisible" @close="close"></dialogEngin>
  </div>
</template>

<script>
import dialogEngin from "./dialogEngin";
export default {
  name: "version.vue",
  components: { dialogEngin },
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: "哈哈",
          name: "34",
          address: "1",
          color:'#4f6234'
        },
        {
          date: "忍忍",
          name: "65",
          address: "2",
          color:"#34fe11"
        },
        {
          date: "天天",
          name: "73",
          address: "3",
          color:"#ffaadd"
        },
        {
          date: "营养",
          name: "22",
          address: "4",
          color:"#eebbaa"
        },
      ],
    };
  },
  methods: {
    handEdit() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    handledetail(e,index){
      this.$emit('nextProp',e,'craft')
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 50px;
  position: relative;
  .btnAdd {
    position: absolute;
    right: 20px;
    top: -45px;
  }
  ::v-deep .btn{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 20px;
    line-height: 32px;
  }
  .el-link {
    margin-left: 10px;
  }
}
</style>
